<template>
  <!-- 卡片部分 -->
  <el-card style="margin: 20px">
    <!-- 头部公共组件 -->
    <ComTitle>
      <template #left>
        <el-row>
          <el-input
            v-model="params.username"
            placeholder="根据用户名搜索"
            style="width: 60%"
          ></el-input>
          <el-button style="margin-left: 15px" @click="params.username = ''"
            >清空</el-button
          >
          <el-button type="primary" @click="search">搜索</el-button>
        </el-row>
      </template>
      <template>
        <el-button type="success" icon="el-icon-edit" @click="addUser"
          >新增用户</el-button
        ></template
      >
    </ComTitle>
    <!-- 警示框部分 -->
    <el-alert
      type="info"
      show-icon
      :closable="false"
      style="margin-top: 20px; marging-bottom: 20px"
    >
      共有{{ total }}条数据
    </el-alert>

    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" type="index" width="100" align="center">
        <template #default="{ $index }">
          {{ (params.page - 1) * params.pagesize + $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系电话"> </el-table-column>
      <el-table-column prop="username" label="用户名" align="center">
      </el-table-column>
      <el-table-column prop="permission_group_title" label="权限名称">
      </el-table-column>
      <el-table-column prop="role" label="角色" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            type="primary"
            plain
            icon="el-icon-edit"
            class="round"
            @click="editUser(row)"
          ></el-button>
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            class="round"
            @click="delUser(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页部分 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50]"
        layout="  prev, pager, next, sizes,jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 新增弹出窗 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="reset">
      <el-form
        :model="addForm"
        style="width: 70%"
        :rules="rules"
        ref="addFormRef"
      >
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input auto-complete="off" v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input auto-complete="off" v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password"
          v-if="title === '创建用户'"
        >
          <el-input auto-complete="off" v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-input auto-complete="off" v-model="addForm.role"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称" :label-width="formLabelWidth">
          <el-select placeholder="请选择" v-model="addForm.permission_group_id">
            <el-option
              v-for="item in simpleArr"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            ></el-option>
            <!-- <el-option label="编辑组" value="2"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input auto-complete="off" v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="介绍" :label-width="formLabelWidth">
          <el-input
            auto-complete="off"
            type="textarea"
            v-model="addForm.introduction"
            placeholder="Please input"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addButton">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
// 导入请求接口
import { list, add, simple, update, remove } from '@/api/base/users'
export default {
  data() {
    const checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    const checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      } else {
        callback()
      }
    }
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    }
    return {
      total: null,
      params: {
        page: 1,
        pagesize: 10,
        keyword: null,
        username: ''
      },
      tableData: [],
      dialogFormVisible: false,
      addForm: {
        avatar: '',
        email: '',
        introduction: '',
        password: '',
        permission_group_id: null,
        phone: '',
        role: '',
        username: ''
      },
      editData: {},
      title: '',
      formLabelWidth: '240px',
      rules: {
        username: [{ validator: checkName, required: true, trigger: 'blur' }],
        email: [{ validator: checkEmail, required: true, trigger: 'blur' }],
        password: [
          { validator: checkPassword, required: true, trigger: 'blur' }
        ]
      },
      simpleArr: []
    }
  },
  methods: {
    // 获取用户列表
    async getUserList() {
      const { data: res } = await list(this.params)
      this.tableData = res.list
      // console.log(res);
      this.total = res.counts
    },
    // 上一页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.page = val
      this.getUserList()
    },
    // 下一页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.page = val
      this.getUserList()
    },

    // 修改用户
    async editUser(row) {
      this.dialogFormVisible = true
      this.title = '编辑用户'
      // 删除对象中的多余的属性
      delete row.permission_group_title
      delete row.is_deleted
      delete row.create_time
      delete row.last_update_time
      this.addForm = { ...row }
      // console.log(this.addForm);
    },
    // 删除功能
    async delUser(row) {
      delete row.permission_group_title
      delete row.is_deleted
      delete row.create_time
      delete row.last_update_time
      this.addForm = { ...row }
      await remove(this.addForm)
      this.getUserList()
    },
    // 新增用户
    addUser() {
      this.dialogFormVisible = true
      this.title = '创建用户'
    },
    async addButton() {
      this.$refs.addFormRef.validate()

      this.addForm.permission_group_id = Number(
        this.addForm.permission_group_id
      )
      // console.log(this.addForm.permission_group_id);
      if (this.title === '创建用户') {
        await add(this.addForm)
      } else {
        await update(this.addForm)
      }
      this.dialogFormVisible = false
      this.getUserList()
      // this.addForm = {};
    },

    // 清空表单
    reset() {
      this.$refs.addFormRef.resetFields()
      this.addForm = {}
    },

    // 搜索
    async search() {
      if (!this.params.username) return
      const { data: res } = await list(this.params)
      this.tableData = res.list
      // console.log(res);
      this.total = res.counts
    },

    // 用户小
    async simple() {
      const { data: res } = await await simple()
      this.simpleArr = [...this.simpleArr, ...res]
      console.log(this.simpleArr)
    }
  },
  created() {
    // 页面加载时渲染页面
    this.getUserList()

    this.simple()
  }
}
</script>

<style scoped lang="scss">
.block {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
.round {
  height: 40px;
  width: 40px;
  padding: 10px;
  border-radius: 50%;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
